<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
  <title>Bootstrap Components &rsaquo; List Group &mdash; Stisla</title>

  <!-- General CSS Files -->
  <link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">

  <!-- CSS Libraries -->

  <!-- Template CSS -->
  <link rel="stylesheet" href="../assets/css/style.css">
  <link rel="stylesheet" href="../assets/css/components.css">
  <link rel="stylesheet" href="../assets/css/rtl.css">
</head>

<body>
  <div id="app">
    <div class="main-wrapper main-wrapper-1">
      <div class="navbar-bg"></div>
      <nav class="navbar navbar-expand-lg main-navbar">
        <form class="form-inline ml-auto">
          <ul class="navbar-nav ml-3">
            <li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
            <li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
          </ul>
          <div class="search-element text-right">
            <input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
            <button class="btn" type="submit"><i class="fas fa-search"></i></button>
            <div class="search-backdrop"></div>
            <div class="search-result">
              <div class="search-header">
                نتیجه جستجو
              </div>
              <div class="search-item">
                <a href="#">چگونه ناسا رو هک کنیم؟</a>
                <a href="#" class="search-close"><i class="fas fa-times"></i></a>
              </div>
              <div class="search-item">
                <a href="#">Kodinger.com</a>
                <a href="#" class="search-close"><i class="fas fa-times"></i></a>
              </div>
              <div class="search-item">
                <a href="#">پنل مدیریت</a>
                <a href="#" class="search-close"><i class="fas fa-times"></i></a>
              </div>
              <div class="search-header">
                نتایج
              </div>
              <div class="search-item">
                <a href="#">
                  <img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
                  آیفون s9 تولید شد
                </a>
              </div>
              <div class="search-item">
                <a href="#">
                  <img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
                  چه شادی هایی که زیر پای انسانها سرکوب شدند
                </a>
              </div>
              <div class="search-item">
                <a href="#">
                  <img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
                  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
                </a>
              </div>
              <div class="search-header">
                پروژه ها
              </div>
              <div class="search-item">
                <a href="#">
                  <div class="search-icon bg-danger text-white ml-3">
                    <i class="fas fa-code"></i>
                  </div>
                  متریال ادمین پنل
                </a>
              </div>
              <div class="search-item">
                <a href="#">
                  <div class="search-icon bg-primary text-white ml-3">
                    <i class="fas fa-laptop"></i>
                  </div>
                  ایجاد صفحه لندینگ
                </a>
              </div>
            </div>
          </div>
        </form>
        <ul class="navbar-nav navbar-right">
          <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
            <div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
              <div class="dropdown-header">پیام ها
                <div class="float-left">
                  <a href="#">علامتگذاری همه بصورت خوانده شده</a>
                </div>
              </div>
              <div class="dropdown-list-content dropdown-list-message">
                <a href="#" class="dropdown-item dropdown-item-unread">
                  <div class="dropdown-item-avatar">
                    <img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
                    <div class="is-online"></div>
                  </div>
                  <div class="dropdown-item-desc text-right">
                    <b>مهدی خانزادی</b>
                    <p>سلام داداچ!</p>
                    <div class="time">۱۰ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item dropdown-item-unread">
                  <div class="dropdown-item-avatar">
                    <img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
                  </div>
                  <div class="dropdown-item-desc">
                    <b>مهیار انصاری</b>
                    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
                    <div class="time">۱۲ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item dropdown-item-unread">
                  <div class="dropdown-item-avatar">
                    <img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
                    <div class="is-online"></div>
                  </div>
                  <div class="dropdown-item-desc">
                    <b>آمیتا پاچان</b>
                    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
                    <div class="time">۱۲ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="dropdown-item-avatar">
                    <img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
                  </div>
                  <div class="dropdown-item-desc">
                    <b>مهدی خانزادی</b>
                    <p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
                    <div class="time">۱۶ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="dropdown-item-avatar">
                    <img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
                  </div>
                  <div class="dropdown-item-desc">
                    <b>لورم ایپسوم</b>
                    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
                    <div class="time">دیروز</div>
                  </div>
                </a>
              </div>
              <div class="dropdown-footer text-center">
                <a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
              </div>
            </div>
          </li>
          <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
            <div class="dropdown-menu dropdown-list dropdown-menu-left">
              <div class="dropdown-header text-right">نوتیفیکیشن ها
                <div class="float-left">
                  <a href="#"> علامتگذاری همه بصورت خوانده شده</a>
                </div>
              </div>
              <div class="dropdown-list-content dropdown-list-icons text-right">
                <a href="#" class="dropdown-item dropdown-item-unread">
                  <div class="dropdown-item-icon bg-primary text-white">
                    <i class="fas fa-code"></i>
                  </div>
                  <div class="dropdown-item-desc">
                    قالب مدیریتی متریال اپدیت جدید داد!
                    <div class="time text-primary">۲ دقیقه پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="dropdown-item-icon bg-info text-white">
                    <i class="far fa-user"></i>
                  </div>
                  <div class="dropdown-item-desc">
                    <b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
                    <div class="time">۱۰ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="dropdown-item-icon bg-success text-white">
                    <i class="fas fa-check"></i>
                  </div>
                  <div class="dropdown-item-desc">
                    <b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
                    <div class="time">۱۲ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="dropdown-item-icon bg-danger text-white">
                    <i class="fas fa-exclamation-triangle"></i>
                  </div>
                  <div class="dropdown-item-desc">
                    فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
                    <div class="time">۱۷ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="dropdown-item-icon bg-info text-white">
                    <i class="fas fa-bell"></i>
                  </div>
                  <div class="dropdown-item-desc">
                    به قالب متریال خوش آمدید
                    <div class="time">دیروز</div>
                  </div>
                </a>
              </div>
              <div class="dropdown-footer text-center">
                <a href="#">
                  <span>نمایش همه</span>
                  <i class="fas fa-chevron-left"></i>
                </a>
              </div>
            </div>
          </li>
          <li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
            <img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
            <div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
            <div class="dropdown-menu dropdown-menu-right text-right">
              <div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
              <a href="features-profile.html" class="dropdown-item has-icon">
                <span>پروفایل</span>
                <i class="far fa-user"></i>
              </a>
              <a href="features-activities.html" class="dropdown-item has-icon">
                <span>فعالیت ها</span>
                <i class="fas fa-bolt"></i>
              </a>
              <a href="features-settings.html" class="dropdown-item has-icon">
                <span>تنظیمات</span>
                <i class="fas fa-cog"></i>
              </a>
              <div class="dropdown-divider"></div>
              <a href="#" class="dropdown-item has-icon text-danger">
                <span>خروج</span>
                <i class="fas fa-sign-out-alt"></i>
              </a>
            </div>
          </li>
        </ul>
      </nav>
      <div class="main-sidebar sidebar-style-2">
        <aside id="sidebar-wrapper">
          <div class="sidebar-brand">
            <a href="index.html">مدیریت پاترونیک</a>
          </div>
          <div class="sidebar-brand sidebar-brand-sm">
            <a href="index.html">مدیریت فروش</a>
          </div>
          <ul class="sidebar-menu">
            <li class="menu-header">داشبورد</li>
            <li class="dropdown active">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
              <ul class="dropdown-menu">
                <li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
                <li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
              </ul>
            </li>
            <li class="menu-header">امکانات بیشتر</li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
                <li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
                <li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
              </ul>
            </li>
            <li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
                <li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
                <li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
                <li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
                <li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
                <li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
                <li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
                <li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
                <li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
                <li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
                <li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
                <li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
                <li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
                <li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
                <li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
                <li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
                <li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
                <li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
                <li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
                <li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
              </ul>
            </li>
            <li class="menu-header">امکانات دیگر</li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="components-gallery.html">گالری</a></li>
                <li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
                <li><a class="nav-link" href="components-tab.html">تب</a></li>
                <li><a class="nav-link" href="components-table.html">جدول</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
                <li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
                <li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
                <li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
                <li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
                <li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
                <li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
                <li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
                <li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
                <li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
                <li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
                <li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
                <li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
                <li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
              </ul>
            </li>
            <li class="menu-header">صفحات</li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
              <ul class="dropdown-menu">
                <li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
                <li><a href="auth-login.html">لاگین</a></li>
                <li><a href="auth-register.html">ثبت نام</a></li>
                <li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="errors-503.html">503</a></li>
                <li><a class="nav-link" href="errors-403.html">403</a></li>
                <li><a class="nav-link" href="errors-404.html">404</a></li>
                <li><a class="nav-link" href="errors-500.html">500</a></li>
              </ul>
            </li>
            <li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
          </ul>

          <div class="mt-4 mb-4 p-3 hide-sidebar-mini">
              <a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
              <i class="fas fa-rocket"></i> مستندات قالب
            </a>
          </div>
        </aside>
      </div>

      <!-- Main Content -->
      <div class="main-content">
        <section class="section">
          <div class="section-header">
            <h1>لیست گروپ</h1>
            <div class="section-header-breadcrumb">
              <div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
              <div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
              <div class="breadcrumb-item">لیست گروپ</div>
            </div>
          </div>

          <div class="section-body text-right">
            <h2 class="section-title">لیست گروپ</h2>
            <p class="section-lead">لیست گروپ ها برای نمایش داده ها در گروه های مختلف مورد استفاده قرار میگیرن.</p>

            <div class="row">
              <div class="col-12 col-md-6 col-lg-6">
                <div class="card">
                  <div class="card-header">
                    <h4>Basic</h4>
                  </div>
                  <div class="card-body">
                    <ul class="list-group">
                      <li class="list-group-item">Cras justo odio</li>
                      <li class="list-group-item">Dapibus ac facilisis in</li>
                      <li class="list-group-item">Morbi leo risus</li>
                      <li class="list-group-item">Porta ac consectetur ac</li>
                      <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header">
                    <h4>Disabled</h4>
                  </div>
                  <div class="card-body">
                    <ul class="list-group">
                      <li class="list-group-item">Cras justo odio</li>
                      <li class="list-group-item disabled">Dapibus ac facilisis in</li>
                      <li class="list-group-item">Morbi leo risus</li>
                      <li class="list-group-item">Porta ac consectetur ac</li>
                      <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header">
                    <h4>Flush</h4>
                  </div>
                  <div class="card-body">
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item">Cras justo odio</li>
                      <li class="list-group-item">Dapibus ac facilisis in</li>
                      <li class="list-group-item">Morbi leo risus</li>
                      <li class="list-group-item">Porta ac consectetur ac</li>
                      <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header">
                    <h4>Badges</h4>
                  </div>
                  <div class="card-body">
                    <ul class="list-group">
                      <li class="list-group-item d-flex justify-content-between align-items-center">
                        Cras justo odio
                        <span class="badge badge-primary badge-pill">14</span>
                      </li>
                      <li class="list-group-item d-flex justify-content-between align-items-center">
                        Dapibus ac facilisis in
                        <span class="badge badge-primary badge-pill">2</span>
                      </li>
                      <li class="list-group-item d-flex justify-content-between align-items-center">
                        Morbi leo risus
                        <span class="badge badge-primary badge-pill">1</span>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header">
                    <h4>JavaScript Behavior</h4>
                  </div>
                  <div class="card-body">
                    <div class="row">
                      <div class="col-4">
                        <div class="list-group" id="list-tab" role="tablist">
                          <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab">Home</a>
                          <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab">Profile</a>
                          <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab">Messages</a>
                          <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab">Settings</a>
                        </div>
                      </div>
                      <div class="col-8">
                        <div class="tab-content" id="nav-tabContent">
                          <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.
                          </div>
                          <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
                            Deserunt cupidatat anim ullamco ut dolor anim sint nulla amet incididunt tempor ad ut pariatur officia culpa laboris occaecat. Dolor in nisi aliquip in non magna amet nisi sed commodo proident anim deserunt nulla veniam occaecat reprehenderit esse ut eu culpa fugiat nostrud pariatur adipisicing incididunt consequat nisi non amet.
                          </div>
                          <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
                            In quis non esse eiusmod sunt fugiat magna pariatur officia anim ex officia nostrud amet nisi pariatur eu est id ut exercitation ex ad reprehenderit dolore nostrud sit ut culpa consequat magna ad labore proident ad qui et tempor exercitation in aute veniam et velit dolore irure qui ex magna ex culpa enim anim ea mollit consequat ullamco exercitation in.
                          </div>
                          <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
                            Lorem ipsum culpa in ad velit dolore anim labore incididunt do aliqua sit veniam commodo elit dolore do labore occaecat laborum sed quis proident fugiat sunt pariatur. Cupidatat ut fugiat anim ut dolore excepteur ut voluptate dolore excepteur mollit commodo. 
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-6">
                <div class="card">
                  <div class="card-header">
                    <h4>Active</h4>
                  </div>
                  <div class="card-body">
                    <ul class="list-group">
                      <li class="list-group-item">Cras justo odio</li>
                      <li class="list-group-item active">Dapibus ac facilisis in</li>
                      <li class="list-group-item">Morbi leo risus</li>
                      <li class="list-group-item">Porta ac consectetur ac</li>
                      <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header">
                    <h4>Link</h4>
                  </div>
                  <div class="card-body">
                    <div class="list-group">
                      <a href="#" class="list-group-item list-group-item-action active">
                        Cras justo odio
                      </a>
                      <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
                      <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
                      <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                      <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header">
                    <h4>Contextual Classes</h4>
                  </div>
                  <div class="card-body">
                    <ul class="list-group">
                      <li class="list-group-item">Dapibus ac facilisis in</li>  
                      <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
                      <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
                      <li class="list-group-item list-group-item-success">A simple success list group item</li>
                      <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
                      <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
                      <li class="list-group-item list-group-item-info">A simple info list group item</li>
                      <li class="list-group-item list-group-item-light">A simple light list group item</li>
                      <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
                    </ul>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header">
                    <h4>Custom Content</h4>
                  </div>
                  <div class="card-body">
                    <div class="list-group">
                      <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
                        <div class="d-flex w-100 justify-content-between">
                          <h5 class="mb-1">List group item heading</h5>
                          <small>3 days ago</small>
                        </div>
                        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                        <small>Donec id elit non mi porta.</small>
                      </a>
                      <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                        <div class="d-flex w-100 justify-content-between">
                          <h5 class="mb-1">List group item heading</h5>
                          <small class="text-muted">3 days ago</small>
                        </div>
                        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                        <small class="text-muted">Donec id elit non mi porta.</small>
                      </a>
                      <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                        <div class="d-flex w-100 justify-content-between">
                          <h5 class="mb-1">List group item heading</h5>
                          <small class="text-muted">3 days ago</small>
                        </div>
                        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                        <small class="text-muted">Donec id elit non mi porta.</small>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
      <footer class="main-footer">
        <div class="footer-left">
          Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
        </div>
        <div class="footer-right">

        </div>
      </footer>
    </div>
  </div>

  <!-- General JS Scripts -->
  <script src="../assets/modules/jquery.min.js"></script>
  <script src="../assets/modules/popper.js"></script>
  <script src="../assets/modules/tooltip.js"></script>
  <script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
  <script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
  <script src="../assets/modules/moment.min.js"></script>
  <script src="../assets/js/stisla.js"></script>
  
  <!-- JS Libraies -->

  <!-- Page Specific JS File -->
  
  <!-- Template JS File -->
  <script src="../assets/js/scripts.js"></script>
  <script src="../assets/js/custom.js"></script>
</body>
</html>
